<template>
  <div class="menu-aside" width="200px">
    <div class="logo-bd">LOGO</div>
    <div class="aside-bd">
      <el-aside class="aside">
        <el-menu class="aside-menu" :default-active="activeIndex" @select="handleSelect">
          <el-sub-menu :index="item.menu_name" v-for="item in menuList">
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{ item.menu_title }}</span>
            </template>
            <el-menu-item v-for="item2 in item.children" :index="item2.menu_name" :route="{ name: item2.route_path }">
              <template #title>
                <el-icon><location /></el-icon>
                <span>{{ item2.menu_title }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { Location } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router' // 引入 useRouter
import { useMenusStore, useCreateView } from '@/stores'

const menusStore = useMenusStore()
const menuList = ref<any[]>([])
const router = useRouter() // 初始化 router
const activeIndex = ref('') // 设置默认激活的菜单项

const handleSelect = (index: string) => {
  // console.log(index)
  useCreateView().saveState(index)
  router.push({ name: index })
}

watch(
  () => useCreateView().createView,
  (newValue) => {
    activeIndex.value = newValue
  }
)

onMounted(async () => {
  menuList.value = menusStore.menus
  // activeIndex.value = useCreateView().createView
})
</script>
<style lang="scss" scoped>
.menu-aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  .logo-bd {
    height: 110px;
    border-bottom: 1px solid var(--el-border-color);
  }
  .aside-bd {
    flex: 1;
    .aside {
      height: 100%;
      .aside-menu {
        border: none;
        height: 100%;
      }
    }
  }
}
</style>
